/**
 * @description: $size  ->  xs(<768px) / sm(≥768px) / md(≥992px) / lg(≥1200px) / xl(≥1400) / xxl(≥1600px) / xxxl(≥1800px)
 * @Date: 2022-03-14 21:47:39
 */
@mixin layout-column($size) {
    $colWidth: (
        responsive: true,
        property: width,
        values: (
            auto: auto,
            1: 4.16667%,
            2: 8.33333%,
            3: 12.5%,
            4: 16.66667%,
            5: 20.83333%,
            6: 25%,
            7: 29.16667%,
            8: 33.33333%,
            9: 37.5%,
            10: 41.66667%,
            11: 45.83333%,
            12: 50%,
            13: 54.16667%,
            14: 58.33333%,
            15: 62.5%,
            16: 66.66667%,
            17: 70.83333%,
            18: 75%,
            19: 79.16667%,
            20: 83.33333%,
            21: 87.5%,
            22: 91.66667%,
            23: 95.83333%,
            24: 100%,
        ),
    );

    @each $key, $value in map-get($colWidth, values) {
        @if $size == none {
            .foxui-col-#{$key} {
                flex: 0 0 auto;
                width: $value;
            }
            .foxui-pull-#{$key} {
                right: $value;
            }
            .foxui-push-#{$key} {
                left: $value;
            }
            .foxui-offset-#{$key} {
                margin-left: $value;
            }
        } @else {
            .foxui-col-#{$size}-#{$key} {
                flex: 0 0 auto;
                width: $value;
            }
            .foxui-pull-#{$size}-#{$key} {
                right: $value;
            }
            .foxui-push-#{$size}-#{$key} {
                left: $value;
            }
            .foxui-offset-#{$size}-#{$key} {
                margin-left: $value;
            }
        }
    }
}

/**
 * @description: hidden/visible
 * @Date: 2022-03-20 14:36:20
 */
@mixin layout-hidden($size) {
    @if $size == none {
        .foxui-hidden {
            display: none !important;
        }
        .foxui-visible {
            display: block !important;
        }
    } @else {
        .foxui-hidden-#{$size} {
            display: none !important;
        }
        .foxui-visible-#{$size} {
            display: block !important;
        }
    }
}

/**
 * @description: gutter
 * @Date: 2022-03-20 14:57:20
 */
@mixin layout-gutter($size) {
    @for $i from 0 through 100 {
        @if $size == none {
            .foxui-gutter-#{$i},
            .foxui-gutter-x-#{$i} {
                --foxui-gutter-x: #{$i}px;
            }
            .foxui-gutter-#{$i},
            .foxui-gutter-y-#{$i} {
                --foxui-gutter-y: #{$i}px;
            }
        } @else {
            .foxui-gutter-#{$size}-#{$i},
            .foxui-gutter-x-#{$size}-#{$i} {
                --foxui-gutter-x: #{$i}px;
            }
            .foxui-gutter-#{$size}-#{$i},
            .foxui-gutter-y-#{$size}-#{$i} {
                --foxui-gutter-y: #{$i}px;
            }
        }
    }
}

/**
 * @description: order
 * @Date: 2022-03-20 14:36:08
 */
@mixin layout-order($size) {
    $order-values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
    );
    @each $key, $value in $order-values {
        @if $size == none {
            .foxui-order-#{$key} {
                order: $value !important;
            }
        } @else {
            .foxui-order-#{$size}-#{$key} {
                order: $value !important;
            }
        }
    }
}

/**
 * @description: position
 * @Date: 2022-03-20 14:36:35
 */
%layout-position-styles {
    position: relative;
}
@mixin layout-position($size) {
    @for $i from 1 through 24 {
        .foxui-col-#{$size}-#{$i} {
            @extend %layout-position-styles;
        }
    }
}
